<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: #9897f0;
            position: absolute;
        }
        .cartoon{
            animation: boxShift 2s infinite;
        }
        @keyframes boxShift {
            0%{
             background-color: #9897f0;
             transform: rotate(0deg);
            }
            50%{
                background-color: #fac6d4;
                transform: rotate(180deg);
            }
            100%{
                background-color: #9897f0;
                transform: rotate(360deg);
            }
        }

    </style>
</head>
<body>
    <div class="box"></div>
    
    <script>
        let box = document.querySelector('.box')
        // 页面可视区域的高
        let scrollHeight = document.documentElement.clientHeight
        // 页面可是区域的宽
        let scrollWidth = document.documentElement.clientWidth

        // 监听鼠标的在屏幕的移动事件
        window.addEventListener('mousemove',function() {
            box.className = 'box cartoon'
        // Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
        // 事件通常与函数结合使用，函数不会在事件发生前被执行！
            let e = event

            // 让元素的宽不要溢出屏幕的宽和高
            if(e.clientX < scrollWidth - box.clientWidth/2 && e.clientY < scrollHeight - box.clientHeight/2 && e.clientX > box.clientWidth/2 && e.clientY > box.clientHeight/2){   
                // 跟随鼠标指针移动，让鼠标保持在元素中间
                box.style.left = e.clientX - box.clientWidth/2 + 'px'
                box.style.top = e.clientY - box.clientHeight/2 + 'px'
            }
            
        })
    </script>
</body>
</html>